<template>
  <view class="flex flex-col justify-center space-y-3 h-full">
    <view class="flex flex-col items-center p-3 space-y-5">
      <u-avatar
          :text="username.substring(0, 1)"
          fontSize="18"
          randomBgColor
      ></u-avatar>
      <view class="grid-cols-3 grid">
        <view class="text-gray-700 ">昵称：</view>
        <view class="col-span-2">
          <input required type="nickname" v-model="username"/>
        </view>
      </view>
    </view>
    <u-divider></u-divider>
    <view class="flex justify-center">
      <view class="w-2/3">
        <u-button type="primary" @click="handleLogin" text="登录"></u-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">

import {ref} from "vue";
import api from "@/api";
import {useUserStore} from "@/store/user";
const userStore =useUserStore()


const avatar = ref('https://zzjtpp.top/blogAPI/upload/blog/images/2023-07-17/8ip93voho3.jpeg')
const username = ref('momo')
const handleLogin = () => {
  uni.login({
    provider: 'weixin',
    success: function (loginRes) {
      console.log(loginRes)
      api.user.wxLoginQuick({
        code: loginRes.code,
        avatar: avatar.value,
        username: username.value
      }).then((res: any) => {
        console.log(res)
        if (res.data.code === 0) {
          userStore.setUserInfo(res.data.data.userInfo)
          userStore.setToken(res.data.data.token)
          userStore.setRefreshToken(res.data.data.refreshToken)
          uni.showToast({
            icon: 'success',
            title: '授权成功'
          })
        }
      })
    }
  });
}

</script>

<style scoped>

</style>